<template>
	<view :data-theme="theme">
		<view style="display: flex;padding: 20rpx; justify-content: flex-end;">
			<view class="title-c bg_color" style="color: #fff;padding: 20rpx;border-radius: 8rpx;">
				{{scheduledStatus[dataDetail.status]}}
			</view>
		</view>
        <!-- 寄售单信息 -->
		<view class="card">
			<h2>寄售单信息</h2>
			<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
			<view class="column">
				<view class="title">
					商家名称:
				</view>
				<view class="title-c">
					{{dataDetail.merName}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					仓库名称:
				</view>
				<view class="title-c">
					{{dataDetail.depotName}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					下单时间:
				</view>
				<view class="title-c">
					{{dataDetail.createTime}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					寄售单号:
				</view>
				<view class="title-c">
					{{dataDetail.consignOrderNo}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					送达时间:
				</view>
				<view class="title-c">
					{{dataDetail.deliverTime ? dataDetail.deliverTime : '-'}}
				</view>
			</view>
			<view class="column">
				<view class="title" style="width: 180rpx;">
					寄售商品总数:
				</view>
				<view class="title-c">
					{{dataDetail.productNumber}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					交货方式:
				</view>
				<view class="title-c">
					{{deliverWay[dataDetail.deliverWay]}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					配送批次:
				</view>
				<view class="title-c">
					{{distributionBatch[dataDetail.distributionBatch]}}
				</view>
			</view>
			<view class="column">
				<view class="title" style="width: 180rpx;">
					预约配送时间:
				</view>
				<view class="title-c">
					{{dataDetail.deliveryTime}}
				</view>
			</view>
			<view class="column">
				<view class="title" style="width: 180rpx;">
					是否预约贴码:
				</view>
				<view class="title-c">
					{{reservationLabel[dataDetail.reservationLabel] ? reservationLabel[dataDetail.reservationLabel] : '-'}}
				</view>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="card">
			<h2>商品信息</h2>
			<view class="stockOrder" v-for="(ele,index) in dataDetail.businessSaveOrderTwoVOList" :key="index">
				<view class="businessStock">
					<!-- <u--image :showLoading="true" :src="ele.skuImage" width="80px" height="80px"
							class="top_left"></u--image> -->
					<view class="top_right">
						<view class="top_right_weight mb_10">[{{ele.productBrand}}]{{ ele.productName }}</view>
					</view>
				</view>
				<view class="column">
					<view class="title">
						商品规格:
					</view>
					<view class="title-c">
						{{ele.skuName}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						商品ID:
					</view>
					<view class="title-c">
						{{ele.id}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						商品类型:
					</view>
					<view class="title-c">
						{{goodsType[ele.goodsType] ? goodsType[ele.goodsType] : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						货物数量:
					</view>
					<view class="title-c">
						{{ele.skuNumber}}({{ele.skuUnit}})
					</view>
				</view>
				<view style="margin:20rpx;border-bottom: 1px solid #f6f6f6"></view>
			</view>
		</view>

		<view class="content-footer"
			style="margin-top: 30rpx;margin-left: 10rpx;margin-right: 10rpx;padding-bottom: 30rpx;">
			<view style="display: flex;">
				<button v-if="dataDetail.status == 0"
					style="margin-right:10px ;height:32px; font-weight: bold;flex: 1;" class="plain_bgColor"
					plain="true" @click="cancelScheduled()">取消寄售</button>
			</view>
		</view>
		<!-- 生态窗组件 -->
		<u-modal :show="showCancelOrder" showCancelButton @confirm="cancelOrder" :content='showCancelOrderInfo'
			@cancel="() => showCancelOrder = false">
		</u-modal>
	</view>
</template>

<script>
	import {consignSaleApi} from '@/api/consignSale.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				dataDetail: {},
				scheduledStatus: {
					0: '待送货',
					1: '送货中',
					2: '已完成',
					3: '商户已取消',
					4: '仓库已取消',
					5: '平台已取消'
				},
				distributionBatch: {
					1: '上午',
					2: '下午',
					3: '晚上',
					4: '凌晨',
				},
				deliverWay: {
					1: '供货商送往仓库',
					2: '驻场加工',
					3: '送提货点'
				},
				reservationLabel: {
					0: '否',
					1: '是'
				},
				goodsType: {
					1: '成品',
					2: '包装物'
				},
				showCancelOrder: false, //确认取消弹窗
				showCancelOrderInfo: '您确认取消寄售吗？',
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let data = JSON.parse(options.data);
			console.log(data);
			this.dataDetail = data;
		},
		methods:{
			// 取消退库确认窗
			cancelScheduled() {
				this.showCancelOrder = true;
			},
			// 确认取消退库操作
			cancelOrder() {
				let ids = this.dataDetail.id;
				consignSaleApi({ids:ids}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
						const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
						const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
						uni.navigateBack({
							delta: 1,
							success: (res) => {
								uni.$emit('shopMessageoTherFun'); // 通过事件总线传递数据给上一个页面
							}
						});
					}
				});
				this.showCancelOrder = false;
			}
		},
	}
</script>

<style lang="scss">
	h1 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin: 20px 0 20px 10px;
		padding-top: 20rpx
	}

	.mb_10 {
		margin-bottom: 10rpx;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.stockOrder {
		background-color: #f6f6f6;
		margin: 0 20rpx;
		border-radius: 16rpx;
	}

	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.businessStock {
		display: flex;
		flex-flow: row;
		padding: 20rpx;

		.top_right {
			margin-left: 10rpx;
		}
	}

	.top_right_weight {
		font-weight: bold;
	}
</style>